<template>
  <div class="layout">
    <div class="layout_header">
      <div class="boxBox">
        <div class="headerLeft">
          <div class="leftLeft">
            <img src="@/img/logo.png" alt="" class="imgBox" />
            <h1 class="titleBox">共创云</h1>
          </div>
          <div class="leftRight">
            <div class="ztBox">服务产品</div>
            <div class="ztBox" style="margin-left: 24px">科创需求</div>
            <div class="ztBox" style="margin-left: 24px">专科论文</div>
            <div class="ztBox" style="margin-left: 24px">交易大数据</div>
          </div>
        </div>
        <div class="headerRight">
          <el-button type="primary">登录</el-button>
          <el-button>注册</el-button>
        </div>
      </div>
    </div>
    <div class="layout_body">
      <div class="contenBox">
        <div class="mainBox">
          <div class="searchBox">
            <div class="bodyLeft">
              <img src="@/img/xz.png" alt="" class="imgBox1" />
              <div class="zt2">资源大厅</div>
            </div>
            <div class="bodyRight">
              <div style="width: 450px">
                <el-input
                  v-model="input"
                  placeholder="请输入资源名称或用户名搜索"
                />
              </div>
              <div class="body_right">
                <el-button type="primary" @click="getListData">搜索</el-button>
              </div>
            </div>
          </div>
          <!-- tab -->
          <div class="tabBox">
            <!-- <div
              :class="tabIndex == index ? 'tab-list' : 'tab-list1'"
              v-for="(item, index) in navList"
              :key="index"
              @click="click(index)"
            >
              {{ item }}
            </div> -->
            <div class="tab-list">服务</div>
          </div>
          <!-- 条件筛选 -->
          <div class="main_box">
            <div class="sxBox">
              <!-- 服务类型 -->
              <div>
                <div :class="lookMore == true ? 'sxtj' : 'sxtj1'">
                  <div class="fwlx">服务类型：</div>
                  <div class="lx">
                    <div
                      class="lxzt"
                      :class="fwIndex == item.id ? 'lxzt1' : 'lxzt'"
                      v-for="item in fwlx"
                      :key="item.id"
                      @click="click({ index: item, type: 'fw' })"
                    >
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="gdBox" v-show="lookMore" @click="selectMore(1)">
                    <div class="gdwz">更多</div>
                    <el-icon><ArrowDown /></el-icon>
                  </div>
                  <div
                    class="gdBox"
                    v-show="unlookMore"
                    @click="unselectMore(1)"
                  >
                    <div class="gdwz">收起</div>
                    <el-icon><ArrowUp /></el-icon>
                  </div>
                </div>
                <div class="divider"></div>
              </div>
              <!-- 二级分类 -->
              <div v-if="fwIndex !== ''">
                <div :class="lookMore4 == true ? 'sxtj' : 'sxtj1'">
                  <div class="fwlx">二级分类</div>
                  <div class="lx">
                    <div
                      class="lxzt"
                      :class="ejIndex == item.id ? 'lxzt1' : 'lxzt'"
                      v-for="item in ejfl"
                      :key="item.id"
                      @click="click({ index: item.id, type: 'ej' })"
                    >
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="gdBox" v-show="lookMore4" @click="selectMore(5)">
                    <div class="gdwz">更多</div>
                    <el-icon><ArrowDown /></el-icon>
                  </div>
                  <div
                    class="gdBox"
                    v-show="unlookMore4"
                    @click="unselectMore(5)"
                  >
                    <div class="gdwz">收起</div>
                    <el-icon><ArrowUp /></el-icon>
                  </div>
                </div>
                <div class="divider"></div>
              </div>
              <!-- 技术领域 -->
              <div>
                <div :class="lookMore1 == true ? 'sxtj' : 'sxtj1'">
                  <div class="fwlx">技术领域：</div>
                  <div class="lx">
                    <div
                      class="lxzt"
                      :class="jsIndex == item.id ? 'lxzt1' : 'lxzt'"
                      v-for="item in jslx"
                      :key="item.id"
                      @click="click({ index: item.id, type: 'js' })"
                    >
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="gdBox" v-show="lookMore1" @click="selectMore(2)">
                    <div class="gdwz">更多</div>
                    <el-icon><ArrowDown /></el-icon>
                  </div>
                  <div
                    class="gdBox"
                    v-show="unlookMore1"
                    @click="unselectMore(2)"
                  >
                    <div class="gdwz">收起</div>
                    <el-icon><ArrowUp /></el-icon>
                  </div>
                </div>
                <div class="divider"></div>
              </div>
              <!-- 数据来源 -->
              <div>
                <div :class="lookMore2 == true ? 'sxtj' : 'sxtj1'">
                  <div class="fwlx">数据来源：</div>
                  <div class="lx">
                    <div
                      :class="sjIndex == item.id ? 'lxzt1' : 'lxzt'"
                      v-for="item in sjly"
                      :key="item.id"
                      @click="click({ index: item.id, type: 'sj' })"
                    >
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="gdBox" v-show="lookMore2" @click="selectMore(3)">
                    <div class="gdwz">更多</div>
                    <el-icon><ArrowDown /></el-icon>
                  </div>
                  <div
                    class="gdBox"
                    v-show="unlookMore2"
                    @click="unselectMore(3)"
                  >
                    <div class="gdwz">收起</div>
                    <el-icon><ArrowUp /></el-icon>
                  </div>
                </div>
                <div class="divider"></div>
              </div>
              <!-- 地区 -->
              <div>
                <div :class="lookMore3 == true ? 'sxtj' : 'sxtj1'">
                  <div class="fwlx">地区：</div>
                  <div class="lx">
                    <div
                      :class="dqIndex == index ? 'lxzt1' : 'lxzt'"
                      v-for="(item, index) in dq"
                      :key="index"
                      @click="click({ item, type: 'dq' })"
                    >
                      {{ item }}
                    </div>
                  </div>
                  <div class="gdBox" v-show="lookMore3" @click="selectMore(4)">
                    <div class="gdwz">更多</div>
                    <el-icon><ArrowDown /></el-icon>
                  </div>
                  <div
                    class="gdBox"
                    v-show="unlookMore3"
                    @click="unselectMore(4)"
                  >
                    <div class="gdwz">收起</div>
                    <el-icon><ArrowUp /></el-icon>
                  </div>
                </div>
                <div class="divider"></div>
              </div>
            </div>
            <!-- 目录 -->
            <div class="buttBox">
              <div class="mlBox">
                <div class="zmlBox" style="flex: 420px">服务名称</div>
                <div class="zmlBox" style="flex: 440px">发布用户</div>
                <div class="zmlBox" style="flex: 300px">服务类型</div>
                <div class="zmlBox" style="flex: 200px">成功成交数</div>
                <div class="zmlBox" style="flex: 180px">信用评价</div>
              </div>
              <div class="mlnrBox">
                <div
                  class="listBox"
                  v-for="(item, index) in listData"
                  :key="index"
                >
                  <div
                    class="listZt"
                    style="flex: 1 1 420px; font-weight: 700; font-size: 16px"
                  >
                    {{ item.title }}
                  </div>
                  <div
                    class="listZt"
                    style="flex: 1 1 440px; font-weight: 700; font-size: 16px"
                  >
                    <img :src="item.avatarUrl" alt="" class="imgimgBox" />
                    <div>{{ item.orgName }}</div>
                  </div>
                  <div class="listZt" style="flex: 1 1 300px">
                    {{ item.serviceTypeName }}
                  </div>
                  <div
                    class="listZt"
                    style="flex: 1 1 200px; font-weight: 700; color: #f1b221"
                  >
                    {{ item.totalDeal }}
                  </div>
                  <div
                    class="listZt"
                    style="flex: 1 1 180px; font-weight: 700; color: #3473e6"
                  >
                    {{ item.avgScore }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pageBox">
            <el-pagination
              background
              :small="small"
              :disabled="disabled"
              layout="prev, pager, next"
              :total="pageData.total"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
const input = ref("");
const fwIndex = ref("");
const ejIndex = ref("");
const jsIndex = ref("");
const sjIndex = ref("");
const dqIndex = ref("");
const pageData = ref({});
const pagination = ref({
  pageSize: 10,
  pageNum: 1,
});
const handleCurrentChange = (val) => {
  pagination.value.pageNum = val;
  getListData();
};

const click = (val) => {
  const type = val.type;
  if (type == "fw") {
    fwIndex.value = val.index.id;
    const data = val.index.children;
    data.splice(0, 0, {
      id: "",
      name: "不限",
      children: [],
    });
    //去重
    let newArr = [];
    for (let i = 0; i < data.length; i++) {
      if (newArr.indexOf(data[i].id) == -1) {
        newArr.push(data[i].id);
      } else {
        data.splice(i, 1);
        i--;
      }
    }
    ejfl.value = data;
  }
  if (type == "js") {
    jsIndex.value = val.index;
  }
  if (type == "sj") {
    sjIndex.value = val.index;
  }
  if (type == "dq") {
    dqIndex.value = val.item;
  }
  if (type == "ej") {
    ejIndex.value = val.index;
  }
  getListData();
};
const lookMore = ref(true);
const unlookMore = ref(false);
const lookMore1 = ref(true);
const unlookMore1 = ref(false);
const lookMore2 = ref(true);
const unlookMore2 = ref(false);
const lookMore3 = ref(true);
const unlookMore3 = ref(false);
const lookMore4 = ref(true);
const unlookMore4 = ref(false);
const fwlx = ref([]);
const jslx = ref([]);
const ejfl = ref([]);
const listData = ref([]);
const sjly = [
  {
    name: "不限",
    id: "",
  },
  {
    name: "共创云",
    id: "nttcc",
  },
  {
    name: "科惠网",
    id: "51kehui",
  },
  {
    name: "江西省网上常设技术市场",
    id: "jxstc",
  },
  {
    name: "潇湘科技要素大市场",
    id: "hntpe",
  },
];
const dq = [
  "不限",
  "湖北省",
  "湖南省",
  "江西省",
  "北京市",
  "天津市",
  "河北省",
  "山西省",
  "内蒙古自治区",
  "辽宁省",
  "吉林省",
  "黑龙江省",
  "上海市",
  "江苏省",
  "浙江省",
  "安徽省",
  "福建省",
  "山东省",
  "河南省",
  "广东省",
  "广西壮族自治区",
  "海南省",
  "重庆市",
  "四川省",
  "贵州省",
  "云南省",
  "西藏自治区",
  "陕西省",
  "甘肃省",
  "青海省",
  "宁夏回族自治区",
  "新疆维吾尔自治区",
  "台湾省",
  "香港特别行政区",
  "澳门特别行政区",
];
const selectMore = (val) => {
  if (val == 1) {
    lookMore.value = false;
    unlookMore.value = true;
  }
  if (val == 2) {
    lookMore1.value = false;
    unlookMore1.value = true;
  }
  if (val == 3) {
    lookMore2.value = false;
    unlookMore2.value = true;
  }
  if (val == 4) {
    lookMore3.value = false;
    unlookMore3.value = true;
  }
  if (val == 5) {
    lookMore4.value = false;
    unlookMore4.value = true;
  }
};
const unselectMore = (val) => {
  if (val == 1) {
    unlookMore.value = false;
    lookMore.value = true;
  }
  if (val == 2) {
    unlookMore1.value = false;
    lookMore1.value = true;
  }
  if (val == 3) {
    unlookMore2.value = false;
    lookMore2.value = true;
  }
  if (val == 4) {
    unlookMore3.value = false;
    lookMore3.value = true;
  }
  if (val == 5) {
    unlookMore4.value = false;
    lookMore4.value = true;
  }
};
onMounted(() => {
  getList();
  getjsList();
  getListData();
});
// 服务类型
const getList = () => {
  axios
    .get(
      "https://service.test.nttcc.com.cn/admin/api/v1/service_type/ladderlist"
    )
    .then((response) => {
      // 处理响应数据
      const data = response.data.data;
      data.splice(0, 0, {
        id: "",
        name: "不限",
        children: [],
      });
      fwlx.value = data;
    })
    .catch((error) => {
      // 处理请求错误
    });
};
//技术类型
const getjsList = () => {
  axios
    .get("https://service.test.nttcc.com.cn/api/v1/technical/list")
    .then((response) => {
      // 处理响应数据
      const data = response.data.data.list;
      data.splice(0, 0, {
        id: "",
        name: "不限",
      });
      jslx.value = data;
    })
    .catch((error) => {
      // 处理请求错误
    });
};
//获取列表
const getListData = () => {
  let data = {
    keywords: input.value,
    logicStatus: 1,
    ...pagination.value,
    serviceTypeId: fwIndex.value,
    serviceTypeId2: ejIndex.value,
    technicalId: jsIndex.value,
    dataOrigin: sjIndex.value,
    province: dqIndex.value,
  };
  axios
    .get("https://service.test.nttcc.com.cn/api/v1/service/list", {
      params: { ...data },
    })
    .then((response) => {
      pageData.value = response.data.data;

      listData.value = response.data.data.list;
    });
};
</script>
<style lang="scss" scoped>
.layout {
  width: 100%;
  height: 100%;
  background: #f6f7f8;
  .layout_header {
    width: 100%;
    height: 50px;
    background: #fff;
    .boxBox {
      margin: 0 auto;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 1200px;
      .headerLeft {
        display: flex;
        align-items: center;
        .leftLeft {
          display: flex;
          align-items: center;
          .imgBox {
            width: 30px;
            height: 30px;
            margin-right: 10px;
          }
          .titleBox {
            font-size: 16px;
            font-weight: 700;
            line-height: 22px;
            color: #3473e6;
          }
        }
        .leftRight {
          margin-left: 50px;
          display: flex;
          align-items: center;
          .ztBox {
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
            color: #606266;
            cursor: pointer;
          }
          .ztBox:hover {
            color: #007aff;
          }
        }
      }
    }
  }
  .layout_body {
    width: 100%;
    background: #f6f7f8;
    .contenBox {
      width: 1200px;
      padding: 30px 0;
      margin: 0 auto;
      .mainBox {
        padding: 30px;
        width: 100%;
        background: #fff;
        .searchBox {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 40px;
          margin-bottom: 20px;
          .bodyLeft {
            display: flex;
            .imgBox1 {
              max-width: 100%;
              height: auto;
              margin-right: 16px;
            }
            .zt2 {
              font-size: 16px;
              font-weight: 700;
              line-height: 22px;
              color: #303133;
            }
          }
          .bodyRight {
            display: flex;
            width: 540px;
            .body_right {
            }
          }
        }
        .tabBox {
          background: #f7f8f9;
          display: flex;
          margin-bottom: 10px;
          align-items: center;
          // padding: 0 30px;
          width: 100%;
          height: 48px;
          .tab-list {
            margin: 30px;
            font-size: 14px;
            font-weight: 700;
            color: #3473e6;
            position: relative;
          }
          .tab-list:before {
            content: "";
            height: 2px;
            background-color: #3473e6;
            width: 100%;
            position: absolute;
            left: 0;
            bottom: -3px;
            transform: scaleX(0);
            transition: 0.3s;
          }
          .tab-list:hover:before {
            transform: scaleX(1);
          }
        }
        .main_box {
          width: 100%;
          .sxBox {
            width: 100%;
            margin-bottom: 30px;
            background: #fff;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            .sxtj {
              height: 40px;
              display: flex;
              overflow: hidden;
              margin-bottom: 10px;
              .fwlx {
                width: 120px;
                line-height: 30px;
                padding-left: 10px;
                margin-top: 10px;
                color: #909399;
                font-size: 14px;
              }
              .lx {
                flex: 1;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                margin-right: 74px;
                .lxzt {
                  cursor: pointer;
                  line-height: 20px;
                  padding: 5px 10px;
                  margin-right: 10px;
                  margin-top: 10px;
                  border-radius: 2px;
                  color: #303133;
                }
                .lxzt1 {
                  color: #fff;
                  background-color: #3473e6;
                  cursor: pointer;
                  line-height: 20px;
                  padding: 5px 10px;
                  margin-right: 10px;
                  margin-top: 10px;
                  border-radius: 2px;
                }
              }
              .gdBox {
                display: flex;
                align-items: center;
                cursor: pointer;
                width: 48px;
                height: 30px;
                margin-top: 10px;
                color: #3473e6;
                .gdwz {
                }
              }
            }
            .sxtj1 {
              height: auto;
              display: flex;
              overflow: hidden;
              margin-bottom: 10px;
              .fwlx {
                width: 120px;
                line-height: 30px;
                padding-left: 10px;
                margin-top: 10px;
                color: #909399;
                font-size: 14px;
              }
              .lx {
                flex: 1;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                margin-right: 74px;
                .lxzt {
                  cursor: pointer;
                  line-height: 20px;
                  padding: 5px 10px;
                  margin-right: 10px;
                  margin-top: 10px;
                  border-radius: 2px;
                  color: #303133;
                }
                .lxzt1 {
                  color: #fff;
                  background-color: #3473e6;
                  cursor: pointer;
                  line-height: 20px;
                  padding: 5px 10px;
                  margin-right: 10px;
                  margin-top: 10px;
                  border-radius: 2px;
                }
              }
              .gdBox {
                display: flex;
                align-items: center;
                cursor: pointer;
                width: 48px;
                height: 30px;
                margin-top: 10px;
                color: #3473e6;
                .gdwz {
                }
              }
            }
            .divider {
              width: 100%;
              height: 1px;
              border-top: 1px dashed #dcdfe6;
            }
          }
          .buttBox {
            width: 100%;
            // background: yellow;
            .mlBox {
              display: flex;
              align-items: center;
              width: 100%;
              height: 48px;
              font-weight: 700;
              background: #f7f8f9;
              border-radius: 4px;
              .zmlBox {
                color: #909399;
                padding: 0 20px;
              }
            }
            .mlnrBox {
              margin-top: 10px;
              width: 100%;
              .listBox {
                height: 80px;
                margin-bottom: 10px;
                display: flex;
                align-items: center;
                // padding: 0 20px;
                border-radius: 4px;
                border: 1px solid #dcdfe6;
                .listZt {
                  display: flex;
                  color: #000;
                  align-items: center;
                  padding: 0 20px;
                  .imgimgBox {
                    width: 40px;
                    height: 40px;
                    margin-right: 20px;
                  }
                }
              }
            }
          }
        }
      }
      .pageBox {
        display: flex;
        width: 100%;
        justify-content: center;
        padding: 20px 0;
      }
    }
  }
}
</style>